<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Spring Cloud Gateway</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0
        }

        .frame-container {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            overflow: hidden;
        }

        .iframe {
            flex-grow: 1;
            border: none;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" th:href="@{/}" href="#">Spring Cloud Gateway</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link" target="micro-frontend-container" th:href="@{/flights/}">Flights</a></li>
            <li class="nav-item"><a class="nav-link" target="micro-frontend-container" th:href="@{/hotels/}">Hotels</a></li>
        </ul>
        <span class="navbar-text"><a class="nav-link" th:href="@{/logout}">Logout <span sec:authentication="name">name</span></a></span>
    </div>
</nav>
<div class="frame-container">
    <!-- As per: https://martinfowler.com/articles/micro-frontends.html -->
    <iframe class="iframe" name="micro-frontend-container" th:src="@{/home}"></iframe>
</div>
</body>
</html>